<template>
  <view>
    <uni-row>
      <!-- offset表示左右边距 -->
      <uni-col :span="4" :offset="10" style="margin-top: 22px;margin-bottom:16.67px;">
        <view class = 'ava'>
          <!-- 对钩图形 -->
          <text class="ava-text">!</text>
          <!-- <image src="../../static/编组 2@2x.png" class="pickture"></image> -->
        </view>
      </uni-col>
    </uni-row>
    <uni-row>
      <!-- offset表示左右边距 -->
      <uni-col :span="4" :offset="10">
        <text class="word">预约成功</text>
      </uni-col>
    </uni-row>
    <uni-card style="margin-top:30px;" @click="toTeam_zheng">
      <uni-row>
        <uni-col :span="2">
          <view class = 'ava2'>
            <!-- 扫码图形 -->
            <text class="ava2-text">#</text>
          </view>
        </uni-col>
        <uni-col :span="18" :offset="2" style="margin-top: 14px;margin-bottom:14px;" >
          <view>
            <text class="word2" >扫码入园</text><br>
            <text class="word2.1">Scan the QR code to enter the park</text>
          </view>
        </uni-col>
      </uni-row>
    </uni-card>
    <text class="word2.2" style="margin-left: 12px;">预约信息</text>
    <uni-card style="margin-top: 8px;margin-left: 12px;margin-right: 12px;margin-bottom: 35px;">
      <uni-row>
        <text class="word">团体名称：{{record[1].team1.tname}}</text><br /><br />
        <text class="word">团体人数：{{record[1].team1.number}}</text><br /><br />
        <text class="word">姓名：{{record[1].team1.pname}}</text><br /><br />
        <text class="word">证件类型：{{record[1].team1.card_type}}</text><br /><br />
        <text class="word">证件号码：{{record[1].team1.card}}</text><br /><br />
        <text class="word">手机号码：{{record[1].team1.phone}}</text><br /><br />
      </uni-row>
    </uni-card>
    <!-- <button @click="onClickButton">
          type ="primary"表示默认按钮类型与颜色 -->
    <!-- <text class="word3">查看入园凭证</text></button>
     <br /> -->
    <button  @click="onClickButton1">
      <text class="word3">取消预约</text></button>
    <button  @click="onClickButton2" style="margin-top: 10px">
      <text class="word3">返回首页</text></button>

  </view>
</template>

<script setup>
import {ref} from 'vue'
import data from '../../data/y_data.json'
let record = ref([])
record = data.record
let onClickButton1 = function() {
  uni.showModal({
    title: '提示',
    content: '确定要取消预约吗？',
    success: (res) => {
      if (res.confirm) {
        // 执行取消预约的API调用
        console.log('预约已取消');
        // 清除本地存储中的数据
        uni.removeStorage({
          key: 'userData',
          success: (res) => {
            uni.reLaunch({
              url: "/pages/apointment/index"
            })
          }
        })
      }}})}
let onClickButton2 = function() {
  uni.reLaunch({
    url:'/pages/apointment/index'
  })
}
let toTeam_zheng = function (){
  uni.navigateTo({
    url:'group-zheng'
  })
}
</script>

<style scoped>
.ava{
  width: 53.33px;
  height: 53.33px;
  background: #8DCB6D;
  border-radius: 50%;
  outline-offset: 22px;
  text-align: center;
}
.ava-text{
  font-weight: 700;
  font-size: 35px;
  text-align: center;
  color: #FFFFFF;
  line-height: 53.33px;
}
.word{
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.ava2{
  width: 32px;
  height: 32px;
  background: #8DCB6D;
  border-radius: 50%;
  /* line-height: 32px; */
  text-align: center;
  margin-top: 21px;
  margin-bottom:7px;
}
.ava2-text{
  font-weight: 700;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 32px;
}
.word2{
  font-family: PingFangSC;
  font-weight: 500;
  font-size: 15px;
  color: #05261B;
  letter-spacing: 0;
}
.word2.1{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #5F5F5F;
  letter-spacing: 0;
}
.word2.2{
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.button1{
  width: 351px;
  height: 45px;
  background: #fff;
  border-radius: 25px;
}
button{
  margin:0 20px;
  height: 45px;
  background: #8DCB6D;
  border-radius: 25px;
}
.word3{
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: 0;
}
</style>